<template>
	<view class="video-supervise-wrap" >
		<view class="example-body">
			<view class="region-wrap">
				<view class="region-wrap-item" v-for="(item ,index) in list" :index="index" :key="index" @click="change(item)">
					<view class="region-wrap-item-view">
						<view class="area-icon">
							<uni-icons :type="item.iconType" size="36"></uni-icons>
						</view>
						<view class="region-name">{{item.regionName}}</view>
						<view class="badge-text" v-if="item.regionCameraNumber > 0">{{item.regionCameraNumber}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			getVidoeProfileList(departmentId) {
				let params = {
					departmentId
				}
				this.$request.ygstCameraRegionNumberList(params).then(res => {
					const data = res
					let areaIconList = ['camera', 'loop', 'map', 'navigate', 'scan', 'flag']
					if (data.length > 0) {
						for(let i = 0; i < data.length; i++) {
							data[i].iconType = areaIconList[i]
						}
						this.list = data
					}
				})
			},
			change(item) {
				console.log('%%item%%', item)
				let region = `regionId=${item.regionId}&regionName=${item.regionName}`
				this.$emit('clickItem', region)
			}
		}
	}
</script>

<style scoped lang="scss">
	.video-supervise-wrap {
		width: 100%;
		margin: 20rpx 0rpx;
		.example-body {
			padding: 20rpx 36rpx;
			.region-wrap {
				text-align: center;
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				.region-wrap-item {
					width: 33.33%;
					flex: 0 0 33.33%;
					.region-wrap-item-view {
						background-color: #FAFAFA;
						box-shadow: 2px 2px 2px #ccc;
						box-sizing: border-box;
						padding: 20rpx 0rpx;
						margin:10rpx;
						position: relative;
						.region-name {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.badge-text {
							background-color: #0A98D5;
							border-radius: 50%;
							width: 42rpx;
							height: 42rpx;
							line-height: 42rpx;
							color: #fff;
							font-size: 30rpx;
							position: absolute;
							right: 6rpx;
							top: 6rpx;
						}
					}
				}
			}
		}
	}
</style>
